﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<style type="text/css">
		/* Base */
		#base {
			border: 1px solid #000;
			margin: 2em;
			width: 10em;
			padding: 5px;
			margin-left: 0px;
			padding-left: 0px;
			}
			
		#base ul {
			list-style: none;
			margin-left: 0;
			padding-left: 1em;
			text-indent: -1em;
			}


		/* Inline List */
		#inline-list {
			border: 1px solid #000;
			margin: 2em;
			width: 80%;
			padding: 5px;
			font-family: Verdana, sans-serif;
			}

		#inline-list p {
			display: inline;
			}

		#inline-list ul, #inline-list li {
			display: inline;
			margin: 0;
			padding: 0;
			color: #339;
			font-weight: bold;
			}
		
		/* Button */
		#button {
			width: 12em;
			border-right: 1px solid #000;
			padding: 0 0 1em 0;
			margin-bottom: 1em;
			font-family: 'Trebuchet MS', 'Lucida Grande',
			  Verdana, Lucida, Geneva, Helvetica, 
			  Arial, sans-serif;
			background-color: #90bade;
			color: #333;
			}
		#button ul {
			list-style: none;
			margin: 0;
			padding: 0;
			border: none;
			}
		
		#button li {
			border-bottom: 1px solid #90bade;
			margin: 0;
			}
		#button li a {
			display: block;
			padding: 5px 5px 5px 0.5em;
			border-left: 10px solid #1958b7;
			border-right: 10px solid #508fc4;
			background-color: #2175bc;
			color: #fff;
			text-decoration: none;
			width: 100%;
			}

		html>body #button li a {
			width: auto;
			}

		#button li a:hover {
			border-left: 10px solid #1c64d1;
			border-right: 10px solid #5ba3e0;
			background-color: #2586d7;
			color: #fff;
			}

	</style>
</head>
<body>
	<div id="base">
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5 we'll make a bit longer so that it will wrap</li>
		</ul>
	</div>
	<div id="inline-list">
		<p>
			A bit of text before the list appears. Perhaps the context is something about a
			husband getting a call from his wife to pick up a few things on the way home from
			work. It doesn&#8217;t really matter, for our purposes we just need some preceding
			text before the list:</p>
		<ul>
			<li>Item 1,</li>
			<li>Item 2,</li>
			<li>Item 3,</li>
			<li>Item 4,</li>
			<li>Item 5 we'll make a bit longer so that it will wrap.</li>
		</ul>
		<p>
			And then there is the text that follows the list in the paragraph. One or two sentences
			is sufficient for the example.</p>
	</div>
	<div id="button">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Hidden Cameras</a></li>
			<li><a href="#">CCTV Cameras</a></li>
			<li><a href="#">Employee Theft</a></li>
			<li><a href="#">Helpful Hints</a></li>
			<li><a href="#">F.A.Q</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>
</body>
</html>
